<template>
  <div class="card">
    <h3>库存（示例数据只读）</h3>
    <table>
      <thead>
        <tr><th>ID</th><th>SKU</th><th>名称</th><th>数量</th><th>仓库</th></tr>
      </thead>
      <tbody>
        <tr v-for="i in list" :key="i.id">
          <td>{{ i.id }}</td>
          <td>{{ i.sku }}</td>
          <td>{{ i.name }}</td>
          <td>{{ i.quantity }}</td>
          <td>{{ i.warehouse.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { api, type InventoryItem } from '../lib/api'

const list = ref<InventoryItem[]>([])

async function load() {
  // 简化：直接读取所有仓库后推断库存，后端未写库存控制器，这里直接访问 H2 生成的列表接口不可用，使用自定义端点更佳
  // 先从运单/订单样本中推导：这里直接请求 /orders，取其仓库和 items 构造一个演示表（不改变后端）
  const { data } = await api.get('/orders')
  const rows: InventoryItem[] = []
  for (const o of data) {
    for (const it of o.items) {
      rows.push({ id: Math.random(), sku: it.sku, name: it.name, quantity: it.quantity, warehouse: o.warehouse })
    }
  }
  list.value = rows
}

onMounted(load)
</script>


